@charset "UTF-8";

.safe,.safe:before,.safe:after { 
    position: absolute; 
    width: 20px; 
    height: 20px; 
    background: #9BC1E5; 
    border-radius: 50%; 
    content: '';
}
/*.safe{
    right: 100px; 
    top: 100px; 
}
 .point:before,.point:after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 12px;
    height: 12px;
    background: blue;
    border-radius: 50%;

} */

.safe:before{
    animation: safe-scale1 2s infinite; 
}

@keyframes safe-scale1 {
    0% {transform: scale(1);opacity: 0.8;}
    100% {transform: scale(6);opacity: 0;}
}

.safe:after{
    animation: safe-scale2 2s infinite; 
}

@keyframes safe-scale2 {
    0% {transform: scale(1);opacity: 1;}
    100% {transform: scale(12);opacity: 0;}
    
}



.danger,.danger:before,.danger:after { 
    position: absolute; 
    width: 20px; 
    height: 20px; 
    background: red; 
    border-radius: 50%; 
    content: '';
}

.danger:before{
    animation: danger-scale1 2s infinite; 
}

@keyframes danger-scale1 {
    0% {transform: scale(1);opacity: 0.8;}
    100% {transform: scale(6);opacity: 0;}
}

.danger:after{
    animation: danger-scale2 2s infinite; 
}

@keyframes danger-scale2 {
    0% {transform: scale(1);opacity: 0.8;}
    100% {transform: scale(12);opacity: 0;}
    
}

